<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_serviceAreas"></title>
    <style>
      #toolbar {
        position: absolute;
        top: 50px;
        right: 10px;
        text-align: center;
        z-index: 1000;
        border-radius: 4px;
      }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary">
  <div class='panel-heading'>
      <h5 class='panel-title text-center' data-i18n="resources.text_serviceAreas"></h5>
  </div>
  <div class='panel-body content'>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.text_serviceCenter"
              onclick="selectCenters()"/>&nbsp;
      <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_submit"
              onclick="findServiceAreas()"/>&nbsp;
      <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear"
              onclick="clearElements(true)"/>
  </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" include="leaflet-geoman" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, resultLayer, service, parameter, marker, 
        centersArray = [], weightsArray = [], markerArray = [],
        baseUrl = host + "/iserver/services/map-changchun/rest/maps/长春市区图",
        serviceUrl = host + "/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
    map = L.map('map', {
        crs: new L.supermap.CRS.NonEarthCRS({
            bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
            origin: L.point(48.4, -55.58)
        }),
        center: [-3500, 5200],
        maxZoom: 18,
        zoom: 3
    });
    new L.supermap.TiledMapLayer(baseUrl, {noWrap: true}).addTo(map);

    function selectCenters() { 
      clearElements(true);
      map.pm.enableDraw('Marker', {
        tooltips: false
      });
      map.on('pm:create', function (e) {
        if (e.layer) {
          var latLng = e.layer.getLatLng();
          centersArray.push(latLng);
          markerArray.push(e.layer);
          weightsArray.push([400 + Math.random() * 100]);
        }
      });
    }

    function findServiceAreas() {
        clearElements();
        if (!centersArray.length) {
          return widgets.alert.showAlert(resources.msg_centerPoint, false);
        }
        var resultSetting = new L.supermap.TransportationAnalystResultSetting({
            returnEdgeFeatures: true,
            returnEdgeGeometry: true,
            returnEdgeIDs: true,
            returnNodeFeatures: true,
            returnNodeGeometry: true,
            returnNodeIDs: true,
            returnPathGuides: true,
            returnRoutes: true
        });
        var analystParameter = new L.supermap.TransportationAnalystParameter({
            resultSetting: resultSetting,
            weightFieldName: "length"
        });
        parameter = new L.supermap.FindServiceAreasParameters({
            centers: centersArray,
            isAnalyzeById: false,
            parameter: analystParameter
        });
        service = new L.supermap.NetworkAnalystService(serviceUrl);
        resultLayer = L.featureGroup().addTo(map);
        parameter.weights = weightsArray;
        // 用法 1 回调方法
        // service.findServiceAreas(parameter, function (serviceResult) {
        //     var result = serviceResult.result;
        //     result && result.serviceAreaList.map(function (serviceArea) {
        //         resultLayer.addLayer(L.geoJSON(serviceArea.serviceRegion));
        //     });

        // });
        // 用法 2 Promise
        service.findServiceAreas(parameter).then((serviceResult) => {
          var result = serviceResult.result;
          result && result.serviceAreaList.map(function (serviceArea) {
              resultLayer.addLayer(L.geoJSON(serviceArea.serviceRegion));
          });
        });

    }

    function clearElements(clearPoint) {
      map.pm.disableDraw();
      map.off('pm:create');
      resultLayer && resultLayer.clearLayers();
      if (clearPoint) {
        centersArray = [];
        weightsArray = [];
        markerArray.forEach(function(marker) {
          marker.pm.remove();
        });
        markerArray = [];
      }
    }
</script>
</body>
</html>
